<template>
  <div class="box">
    <header>
      <van-nav-bar title="我的嗨购">
        <template #left>
          <van-icon
            name="arrow-left"
            size="26"
            color="black"
            @click="$router.back()"
          />
        </template>
        <template #right>
          <van-popover
            v-model="showPopover"
            trigger="click"
            :actions="actions"
            @select="onSelect"
            placement="bottom-end"
            theme="dark"
          >
            <template #reference>
              <van-icon name="ellipsis" size="26" color="black" />
            </template>
          </van-popover>
        </template>
      </van-nav-bar>
    </header>
    <div class="main">
      <div class="mymsg">
        <div>
          <img
            src="https://img0.baidu.com/it/u=1250551608,2180019998&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1670173200&t=2a7170931e9c487fed203763ad1ddfdf"
            alt=""
          />
          <div class="nicktel">
            <h4>{{ userid }}</h4><br>
            <p>{{ usertel }}</p>
          </div>
        </div>
        <van-icon
          name="setting"
          class="userchange"
          @click="$router.push('/setting')"
        />
      </div>
      <div class="top10">
        <van-cell class="top10" icon="orders-o" is-link @click="$router.push('/orderlist')">
          <template #title>
            <span class="custom-title">全部订单</span>
          </template>
        </van-cell>
        <van-cell class="top10" icon="balance-o" is-link>
          <template #title>
            <span class="custom-title">待付款</span>
            <van-tag type="danger">2</van-tag>
          </template>
        </van-cell>
        <van-cell icon="logistics" is-link>
          <template #title>
            <span class="custom-title">待收货</span>
            <van-tag type="danger">6</van-tag>
          </template>
        </van-cell>
        <van-cell class="top10" title="优惠券" icon="refund-o" is-link />
        <van-cell title="商品收藏" icon="star-o" is-link />
        <van-cell title="收藏店铺" icon="shop-collect-o" is-link />
        <van-cell title="退款/售后" icon="cash-back-record" is-link />
      </div>
    </div>
  </div>
</template>

<script>
import { userInfo } from "../api/user";
import Vue from "vue";
import { Cell, CellGroup } from "vant";

Vue.use(Cell);
Vue.use(CellGroup);
export default {
  name: "My",
  data() {
    return {
      showPopover: false,
      actions: [
        { text: "返回首页", icon: "wap-home-o" },
        { text: "分类搜索", icon: "apps-o" },
        { text: "购物车", icon: "shopping-cart-o" },
        { text: "我的嗨购", icon: "contact" },
        { text: "浏览记录", icon: "eye-o" },
      ],
      userid: "",
      usertel: "",
    };
  },
  methods: {
    onSelect(action, index) {
      switch (index) {
        case 0:
          this.$router.push("/home");
          break;
        case 1:
          this.$router.push("/kind");
          break;
        case 2:
          this.$router.go(0);
          break;
        case 3:
          this.$router.push("/my");
          break;
        case 4:
          this.$router.push("/kind");
          break;
        default:
          break;
      }
    },
  },
  created() {
    userInfo({ userid: localStorage.getItem("userid") }).then((res) => {
      console.log(res);
      if (res.data.code == "200") {
        this.userid = res.data.data[0].userid;
        this.usertel = res.data.data[0].tel.slice(0,3) + "****"+res.data.data[0].tel.slice(7);
      }
    });
  },
};
</script>

<style scoped>
.mymsg {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 1.2rem;
  background: #fff;
}
.mymsg img {
  width: 0.8rem;
  margin: 0 0.2rem;
}
.mymsg div {
  display: flex;
  justify-content: center;
}
.userchange {
  color: #ccc;
  font-size: 0.3rem;
  margin: 0.2rem;
}
.top10 {
  margin-top: 0.1rem;
}
.nicktel{
  display: flex;
  flex-direction: column;
}
.nicktel h4{
  color:red;
  font-size: .18rem;
}
.nicktel p{
  color:#ccc;
  font-size: .14rem;
}
.van-cell__title .van-tag{
  margin-left: .05rem;
}
</style>